<template>
    <div class="login">
      <div class="title"><div class="back-wrapper"><back></back></div>登录<router-link class="register" to="register">注册</router-link></div>
      <div class="logo-wrapper"></div>
      <div class="form">
        <div class="line-item">
          <label class="name">手机号</label>
          <input type="text" class="ipt tel" placeholder="请输入手机号" @focus="_onTel" @blur="_removeOnTel">
        </div>
        <div class="line-1px">
          <div class="act-1px"   :class="{active:telLine}"></div>
        </div>
        <div class="line-item">
          <label class="name">密码</label>
          <input type="text" class="ipt pwd" placeholder="请输入密码" @focus="_onPwd" @blur="_removeOnPwd">
        </div>
        <div class="line-1px">
          <div class="act-1px"  :class="{active:pwdLine}"></div>
        </div>
      </div>
      <div class="smt-wrapper">
        <button class="smt">登录</button>
      </div>
      <div class="forgetPwd-wrapper">
        <router-link class="forgetPwd" to="changePassword">忘记密码?</router-link>
      </div>
    </div>
</template>

<script>
    import back from '../../../components/back/back'
    export default {
        name: "login",
        data(){
          return{
            telLine:false,
            pwdLine:false
          }
        },
        components:{
          'back':back
        },
        methods:{
          _onTel(){
            this.telLine = true
            // this.$refs['tel-act-1px'].style.width = '100%';
          },
          _removeOnTel(){
            this.telLine = false
          },
          _onPwd(){
            this.pwdLine = true
            // this.$refs['tel-act-1px'].style.width = '100%';
          },
          _removeOnPwd(){
            this.pwdLine = false
          }
        }
    }
</script>

<style scoped lang="stylus">
  .login
    height calc(100% - 18px)
    color #ffffff
    background #101011
    .title
      position relative
      margin-top 10px
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      .back-wrapper
        position absolute
        left 0
        top 0
        width 36px
        height 22px
      .register
        position absolute
        color #ffffff
        right 16px
        font-size 14px
        line-height 22px
        top 4px
    .logo-wrapper
      height 134px
      background url("logo.svg")no-repeat center center /50px 50px
    .form
      .line-1px
        height 1px
        background #343434
        margin 0 35px
        .act-1px
          height 1px
          width 0
          transition width .3s
          background #F7C20F
          &.active
            width 100%
            transition width .3s
      .line-item
        height 54px
        line-height 54px
        padding 0 32px
        font-size 0
        .name
          display inline-block
          width 48px
          text-align left
          color #F7C20F
          font-size 16px
        .ipt
          width calc(100% - 90px)
          height 54px
          font-size 16px
          background none
          border none
          padding-left 42px
          outline none
          color #ffffff


    .smt-wrapper
      height 44px
      padding 0 36px
      padding-top 45px
      .smt
        height 44px
        width 100%
        text-align center
        line-height 44px
        background #F7C20F
        border none
        outline none
        border-radius 4px
        color #333333
        font-size 16px
        &:active
          background #ebb90e
    .forgetPwd-wrapper
      padding 0 36px
      text-align right
      margin-top 20px
      .forgetPwd
        color #F7C20F
        text-align right
        font-size 12px
</style>
